<!--
 * @Description: 使用 https://www.swiper.com.cn/demo/index.html#virtual-slides
 * API: https://www.swiper.com.cn/api/virtual/374.html
 * vue 使用: https://swiperjs.com/vue
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-02-07 10:07:39
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-05-30 11:49:16
-->
<template>
  <div class="swiper-virtual cardSwipe">
    <ClientOnly>
      <!-- @swiper="onSwiper" -->
      <swiper
        :modules="[Virtual]"
        virtual
        :slides-per-view="4"
        space-between="0"
        :initial-slide="997"
        :touch-ratio="0.36"
        :centered-slides="true"
        @init="initSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide
          v-for="(slideContent, index) in slides"
          :key="index"
          :virtualIndex="index"
        >
          <div class="swipeCarditem items-center">
            <img
              class="swipeCarditem-icon"
              src="/image/lottery/card-icon.svg"
            />
            <span class="swipeCarditem-bfb">
              {{ getCardText((index % 5) + 1) }}
            </span>
            <span class="swipeCarditem-jc"> {{ t("lottery.jackpot") }} </span>
          </div>
        </swiper-slide>
      </swiper>
    </ClientOnly>
  </div>
</template>
<script setup lang="ts" name="cardSwipe">
import { onMounted } from "vue";
// yarn add  swiper
import { Swiper, SwiperSlide } from "swiper/vue";
import { Virtual } from "swiper/modules";
import "swiper/scss";

const props = withDefaults(
  defineProps<{
    centerindex?: number;
  }>(),
  {
    centerindex: 0,
  }
);

const emit = defineEmits(["initDone", "update:centerindex", "change"]);
const { t } = useI18n();

const slides = Array.from({ length: 2000 }).map((el, index) => index);

// const onSwiper = (swiper: any) => {
//   console.log("Card onSwiper 加载完成!");
//   // emit("initDone", swiper);
// };

// swiper 滚动改变
const onSlideChange = (val: any) => {
  // console.log("slide change", val.activeIndex);
  emit("change", val.activeIndex);
};

// 初始化完成
const initSwiper = (val: any) => {
  console.log("Card swiper 初始化完成!");
  emit("initDone", val);
};

// 百分比-文案
const getCardText = (val: number) => {
  if (val == 1) {
    return "1%";
  } else if (val == 2) {
    return "3%";
  } else if (val == 3) {
    return "5%";
  } else if (val == 4) {
    return "0.1%";
  } else if (val == 5) {
    return "0.5%";
  }
  return "0.5%";
};

onMounted(() => {});
</script>
<style lang="scss">
.cardSwipe {
  .swiper-slide {
    transform: scale(0.8) !important;
    margin-left: -3.5 * 2px !important;
  }

  .swiper-slide-prev {
    transform: scale(0.9) !important;
    margin-left: -3.5 * 2px !important;
  }

  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: scale(1) !important;
    margin-left: 7 * 2px !important;
    margin-right: 10.5 * 2px !important;
  }

  .swiper-slide-next {
    transform: scale(0.9) !important;
    margin-right: 0 * 2px !important;
  }

  .swipeCarditem {
    justify-content: center;
    position: relative;
    margin-right: -2.5 * 2px;
    &-icon {
      width: 100%;
      height: 100%;
    }
    &-bfb {
      position: absolute;
      top: 70px;
      left: 0px;
      width: 100%;
      text-align: center;
      color: #007bff;
      font-size: 15 * 2px;
      font-weight: 700;
      &-bfb0 {
        top: 68px;
      }
      &-bfb1 {
        top: 60px;
      }
    }
    &-jc {
      position: absolute;
      top: 189px;
      left: 0;
      width: 100%;
      text-align: center;
      color: #fff1a9;
      font-weight: 590;
      font-size: 12 * 2px;
      &-jc0 {
        bottom: 38px;
      }
      &-jc1 {
        bottom: 32px;
      }
    }
  }
}
</style>
